<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
  <th:block th:include="include-nblog :: seo" />
  <th:block th:include="include-nblog :: header-res" />
</head>
<body>
<!--top begin-->
<th:block th:include="include-nblog :: header-nav" />
<!--top end-->
<article>
  <!--lbox begin-->
  <div class="lbox">
    <div class="content_box whitebg">
      <input type="hidden" id="liked" th:value="${liked}">
      <input type="hidden" id="articleId" th:value="${article.id}">
      <h2 class="htitle">
        <span class="con_nav">您现在的位置是：<a th:href="${parentCategory.url}" th:text="${parentCategory.name}"></a>
          ><a th:href="${category.url}" th:text="${category.name}"></a>
        </span>
        文章内容
      </h2>

      <h1 class="con_tilte" th:text="${article.title}"></h1>
      <p class="bloginfo">
        <span th:text="${article.author}"></span>
        <span th:text="${#dates.format(article.gmtCreate, 'yyyy-MM-dd')}"></span>
        <span><span th:text="${article.readNum}"></span>人已围观</span>
      </p>
      <p class="con_info">
        <b>简介</b><span th:text="${article.description}"></span></p>
      <div class="con_text">
        <p th:utext="${article.content}">
        </p>
<!--        <p><span class="diggit"></span></p>-->

<!--        <div role="complementary" aria-label="工具栏" class="detail-side-interaction">-->
<!--          <div tabindex="0" role="button" aria-label="点赞33" aria-pressed="false" class="detail-like">-->
<!--            <div class="digg-icon"><div class="inner"><i></i></div></div><span>33</span></div>-->
<!--          <div class="divide"></div>-->

        <p th:if="${logined}">
          <span class="digg-icon" id="like" th:classappend="${liked} ? 'digg-icon-done':''"></span>
          <span class="digg-text" id="likeNum" th:text="${likeNum}"></span>
          <a href="#replyContent"><span class="digg-icon-comment" id="reply"></span></a>
          <span class="digg-text" th:text="${replyNum}"></span>
        </p>
<!--        <div tabindex="0" role="button" aria-label="点赞33" aria-pressed="false" class="detail-like">-->
<!--          <div class="digg-icon"><div class="inner"><i></i></div></div><span>33</span>-->
<!--        </div>-->

<!--        <div class="digg-icon"><div class="inner"><i></i></div></div>-->

<!--                <p><span class="diggit">赞一个</span></p>-->
        <div class="nextinfo">
          <p th:if="${preArticle}" >上一篇：<a th:href="${preArticle.url}" th:text="${preArticle.title}"></a></p>
          <p th:if="${nextArticle}" >下一篇：<a th:href="${nextArticle.url}" th:text="${nextArticle.title}"></a></p>
        </div>
      </div>
    </div>
<!--    <div class="whitebg">-->
<!--      <h2 class="htitle">相关文章</h2>-->
<!--      <ul class="otherlink">-->
<!--        <li><a href="/download/div/2018-04-22/815.html" title="html5个人博客模板《黑色格调》">html5个人博客模板《黑色格调》</a></li>-->
<!--        <li><a href="/download/div/2018-04-18/814.html" title="html5个人博客模板主题《清雅》">html5个人博客模板主题《清雅》</a></li>-->
<!--        <li><a href="/download/div/2018-03-18/807.html" title="html5个人博客模板《绅士》">html5个人博客模板《绅士》</a></li>-->
<!--        <li><a href="/download/div/2018-02-22/798.html" title="html5时尚个人博客模板-技术门户型">html5时尚个人博客模板-技术门户型</a></li>-->
<!--        <li><a href="/download/div/2017-09-08/789.html" title="html5个人博客模板主题《心蓝时间轴》">html5个人博客模板主题《心蓝时间轴》</a></li>-->
<!--        <li><a href="/download/div/2017-07-16/785.html" title="古典个人博客模板《江南墨卷》">古典个人博客模板《江南墨卷》</a></li>-->
<!--        <li><a href="/download/div/2017-07-13/783.html" title="古典风格-个人博客模板">古典风格-个人博客模板</a></li>-->
<!--        <li><a href="/download/div/2015-06-28/748.html" title="个人博客《草根寻梦》—手机版模板">个人博客《草根寻梦》—手机版模板</a></li>-->
<!--        <li><a href="/download/div/2015-04-10/746.html" title="【活动作品】柠檬绿兔小白个人博客模板">【活动作品】柠檬绿兔小白个人博客模板</a></li>-->
<!--        <li><a href="/jstt/bj/2015-01-09/740.html" title="【匆匆那些年】总结个人博客经历的这四年…">【匆匆那些年】总结个人博客经历的这四年…</a></li>-->
<!--      </ul>-->
<!--    </div>-->


    <div class="whitebg gbook">
      <h2 class="htitle">文章评论</h2>
      <ul>

        <!-- 评论 开始 -->
        <div class="pinglun">



            <!--       <div class="pl-area-userpic">
                    <img id="pl-userpic" src="/e/extend/lgyPl/assets/nouserpic.gif">      </div> -->
            <div class="pl-area-post" th:if="${logined}">
              <div class="pl-post">
                <div class="pl-textarea"><textarea class="pl-post-word" id="replyContent" placeholder="写下你想说的，开始我们的对话"></textarea>
                </div>
                <div class="pl-tools">
                  <ul>
                    <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="btnReply">发 布</button></li>
                    <li class="username"><i class="iconfont"></i><input type="text" id="pl-username" class="pl-key" size="15" placeholder="你的昵称" th:value="${user.userName}"></li>
                  </ul>
                </div>
<!--                <div class="pl-img-box" id="pl-img-box" style="display: none;">-->
<!--                  <div class="pl-img-box-before"><a class="pl-icon icon-img"></a></div>-->
<!--                  <div class="pl-img-file"><input placeholder="http://" type="text"> <button>添加</button></div>-->
<!--                </div>-->
              </div>
            </div>

<!--            <div class="pl-clr"></div>-->
<!--            <div class="pl-showinfo">请先说点什么</div>-->
<!--            <div class="pl-clr"></div>-->
<!--            <div class="pl-show-hot-list">-->
<!--              <div class="pl-title">热门评论</div>-->
<!--              <div class="pl-show-list" id="pl-show-hot"></div>-->
<!--            </div>-->
            <div class="pl-clr" id="pl-start"></div>
<!--            <div class="pl-header"><em id="pl-joinnum">3397</em>人参与，<em id="pl-totalnum">3</em>条评论<span class="pl-userinfo" id="pl-userinfo"></span></div>-->
            <div class="pl-show-list" id="pl-show-all">

              <div class="pl-area pl-show-box" id="pl-show-box-116" th:each="replyItem:${replyDataList}">
                <div class="pl-area-userpic">
                  <img id="pl-userpic" th:src="${replyItem.replyUser.avatar}">
                </div>
                <div class="pl-area-post">
                  <div class="pl-show-title"><span th:text="${replyItem.replyUser.userName}"></span> <span class="pl-show-time pl-fr" th:text="${#dates.format(replyItem.gmtCreate, 'yyyy-MM-dd HH:mm')}"></span></div>
                  <div class="pl-show-saytext" th:utext="${replyItem.content}"></div>
                  <div class="pl-show-tools">
<!--                    <a id="pl-err-info-116"></a>-->
<!--                    <a href="javascript:;" onclick="lgyPl.doForPl(116,1,this)">-->
<!--                      <i class="iconfont icon-good"></i><span id="pl-1-116"></span></a>-->
                    <a class="pl-reply"  href="javascript:;"><i class="iconfont"></i></a>
                  </div>
                  <div class="pl-show-replay" style="display:none">
                    <div class="pl-post">
                      <div class="pl-textarea"><textarea class="pl-post-word" id="pl-520am-f-saytext" placeholder="@昵称"></textarea>
                      </div>
                      <div class="pl-tools">
                        <ul>
                          <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="btnItemReply">发 布</button></li>
                          <li class="username"><i class="iconfont"></i><input type="text" id="pl-username" class="pl-key" size="15" placeholder="你的昵称" th:value="${user.userName}"></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pl-clr"></div>
              </div>

<!--              <div class="pl-area pl-show-box" id="pl-show-box-113">-->
<!--                <div class="pl-area-userpic">-->
<!--                  <img id="pl-userpic" src="/e/extend/lgyPl/assets/userpic/user_03.jpg">-->
<!--                </div>-->
<!--                <div class="pl-area-post">-->
<!--                  <div class="pl-show-title"><span>匿名读友</span> <span class="pl-show-time pl-fr">2022年06月27日 09:11</span></div>-->
<!--                  <div class="pl-show-saytext">博主您好，关注您好久了，请问可以分享一下如何建立个人网站吗？</div>-->
<!--                  <div class="pl-show-tools"><a id="pl-err-info-113"></a> <a href="javascript:;" onclick="lgyPl.doForPl(113,1,this)"><i class="iconfont icon-good"></i><span id="pl-1-113"></span></a> &lt;!&ndash; <a href="javascript:;" onclick="lgyPl.doForPl(113,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-113"></span></a> &ndash;&gt; <a class="pl-reply" onclick="lgyPl.showReply(113,'匿名读友')" href="javascript:;"><i class="iconfont"></i></a></div>-->
<!--                  <div class="pl-show-replay"></div>-->
<!--                </div>-->
<!--                <div class="pl-clr"></div>-->
<!--              </div>-->
<!--              <div class="pl-area pl-show-box" id="pl-show-box-94">-->
<!--                <div class="pl-area-userpic">-->
<!--                  <img id="pl-userpic" src="/e/extend/lgyPl/assets/userpic/user_06.jpg">-->
<!--                </div>-->
<!--                <div class="pl-area-post">-->
<!--                  <div class="pl-show-title"><span>22</span> <span class="pl-show-time pl-fr">2022年05月24日 17:55</span></div>-->
<!--                  <div class="pl-show-saytext">11</div>-->
<!--                  <div class="pl-show-tools"><a id="pl-err-info-94"></a> <a href="javascript:;" onclick="lgyPl.doForPl(94,1,this)"><i class="iconfont icon-good"></i><span id="pl-1-94"></span></a> &lt;!&ndash; <a href="javascript:;" onclick="lgyPl.doForPl(94,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-94"></span></a> &ndash;&gt; <a class="pl-reply" onclick="lgyPl.showReply(94,'22')" href="javascript:;"><i class="iconfont"></i></a></div>-->
<!--                  <div class="pl-show-replay"></div>-->
<!--                </div>-->
<!--                <div class="pl-clr"></div>-->
<!--              </div>-->
            </div>
<!--            <div id="pl-pagination"></div>-->
<!--            <button onclick="lgyPl.getNewsComment(0,this);" class="showAllComment buttonGray">查看更多</button></div>-->
<!--          <script type="text/javascript" src="/e/extend/lgyPl/api.js"></script>-->
        </div>
        <!-- 评论 结束 -->
      </ul>
    </div>

  </div>
  <!--lbox end-->
  <th:block th:include="include-nblog :: content-right" />


</article>

<th:block th:include="include-nblog :: footer" />
<link th:href="@{/blog/css/style.css}" rel="stylesheet">
<style>
  /*.detail-like {*/
  /*  text-align: center;*/
  /*  cursor: pointer;*/
  /*  color: #222;*/
  /*  outline: none;*/
  /*}*/
  /*.detail-like>span {*/
  /*  display: inline-block;*/
  /*  margin-top: 4px;*/
  /*  font-size: 12px;*/
  /*  line-height: 20px;*/
  /*}*/
  /*.digg-icon {*/
  /*  position: relative;*/
  /*  border-radius: 24px;*/
  /*  width: 48px;*/
  /*  height: 48px;*/
  /*  background: #f8f8f8;*/
  /*}*/
  /*.digg-icon .inner {*/
  /*  position: absolute;*/
  /*  top: 50%;*/
  /*  left: 50%;*/
  /*  -webkit-transform: translate(-50%,-50%);*/
  /*  -moz-transform: translate(-50%,-50%);*/
  /*  transform: translate(-50%,-50%);*/
  /*  font-size: 0;*/
  /*}*/
  .digg-icon {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/blog/images/like.svg) no-repeat 50%;
    background-size: contain;
  }


  .digg-icon-done{
    background: url(/blog/images/like_active.svg) no-repeat 50%;
  }

  .digg-icon-comment {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/blog/images/icon_comment.svg) no-repeat 50%;
    background-size: contain;
  }
  .digg-text {
    /*cursor: pointer;*/
    display: inline-block;
    width: 24px;
    height: 24px;
    /*background: url(/blog/images/like.svg) no-repeat 50%;*/
    background-size: contain;
  }
</style>
<script>
  $(document).ready(function(){
    $("#like").click(function(){
      var liked = $("#liked").val();
      like(liked=='true');
    });

    $("#btnReply").click(function () {
      var id = $("#articleId").val();
      var param = {articleId:id,content:$("#replyContent").val(),replyId:null};
      $.ajax({type:"POST",url:'/cmsBlog/reply',dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
          if(result.success){
            alert("发布成功");
            window.location.reload();
          }else{
            alert(result.message || '操作失败');
          }
        }});
    });

  });

  function like(liked){
    var url = "/cmsBlog/like";
    if(liked){
      url = "/cmsBlog/unLike";
    }
    var id = $("#articleId").val();
    var param = {id:id};
    $.ajax({type:"POST",url:url,dataType:'JSON', contentType:'application/json', data:JSON.stringify(param),success:function(result){
        var likeNum = Number($("#likeNum").text());
        if(result.success){
            if(liked){
              $(".digg-icon").removeClass("digg-icon-done");
              $("#liked").val(false);
              $("#likeNum").text(likeNum-1);
            }else{
              $(".digg-icon").addClass("digg-icon-done");
              $("#liked").val(true);
              $("#likeNum").text(likeNum+1);
            }
        }else{
          alert(result.message || '操作失败');
        }
      }});

  }
</script>
</body>
</html>
